<template>
	<view class="withdrawlog-container">
		<!-- 头部 -->
		<pagehead>划转记录</pagehead>
		<view class="withdrawlog-content">
			<scroll-view scroll-y class="withdrawlog-scroll" @scrolltolower="lower()" v-if="isShowPage">
				<view class="withdrawlog-list" v-if="list.length != 0">
					<view v-for="(item,index) in list" :key="index" class="withdrawlog-item">
						<view class="info">
							<view class="label">设备编号</view>
							<view class="des"><text class="red" :data-snList="item.sn_code"  @tap.stop="viewData">点击查看</text></view>
						</view>
						<view class="info">
							<view class="label">拨入会员账号</view>
							<view class="des">{{ item.in_sys_user_account }}</view>
						</view>
						<view class="info">
							<view class="label">划拨时间</view>
							<view class="des">{{ item.cre_date }}</view>
						</view>
						<view class="info" v-if="!(item.is_transfer_reward ==null || item.is_transfer_reward ==undefined )">
							<view class="label">激活奖励</view>
							<view class="des">{{ item.is_transfer_reward == 0 ? '自己' : '伙伴' }}</view>
						</view>
					</view>
				</view>
				<view class="initNoData" v-if="list.length == 0">—暂无内容—</view>
			</scroll-view>
	</view>
	<!-- 查看机具编号列表-->
	<uni-popup ref="snPopup" type="bottom" :animation="true" @change="changePopup($event,'snPopup')">
			<view class="modalPsd">
				<view class="modal-wrapper">
					<view class="formBox">
						<view class="formBox-wrapper">
							<view class="formBox-header">划拨机具 <text class="cancel" @tap.stop="hidePopup('snPopup')">取消</text></view>
              <view class="search-box">
                <view class="search">
                  <image :src="IMAGE_STATIC+'/images/icon-search.png'" class="ico" mode="heightFix" />
                  <input type="text" v-model="keyword" placeholder="请输入要搜索的机具编号">
                </view>
                <view class="btn" @tap.stop="search()">搜索</view>
              </view>
              <view class="ul">
                <view class="li">
                  <view class="p th">序列</view>
                  <view class="p th">机具编号</view>
                </view>
                <view class="ul-content">
                <view class="li" v-for="(item,index) in snLlist" :key="index">
                  <view class="p">{{index}}</view>
                  <view class="p">{{item}}</view>
                </view>
              </view>
              </view>
					</view>
				</view>
			</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			IMAGE_STATIC: this.$url.assetsPath,
			list: [],
			lastId: 0,
			pageIndex: 1,
			pageSize: 10,
			isShowPage: false,
			cashType:'',
			keyword:'',
			snLlist:[],
      snLlistAll:[
        '11','00','11','00','11','00','11','00','11','00','11','11','00',
        '00','11','00','11','00','11','00','11','00','11','00','11','00',
      ],
		}
	},
	computed: {
		// 00-待处理02-处理中04-已撤销08-处理失败09-处理成功
		setwithdrawstatus() {
			return function (msg) {
				switch (msg) {
					case '00':
						return '待处理'
						break;
					case '02':
						return '处理中'
						break;
					case '04':
						return '已撤销'
						break;
					case '08':
						return '处理失败'
						break;
					case '09':
						return '处理成功'
						break;
				}
			}
		},
		setwithdrawstyle() {
			return function (msg) {
				switch (msg) {
					case '00':
						return '#B66D3A'
						break;
					case '08':
						return '#15C775'
						break;
					case '09':
						return '#F42D41'
						break;
				}
			}
		}
	},
	onLoad(options) {
		if(options){
			this.cashType = options.value1
			this.init();
		}
	},
	methods: {
		init() {
			this.isShowPage = false,
			this.lastId = '';
			this.list = [];
			this.getWithdrawList();
		},
		// 奖励来源列表
		getWithdrawList() {
			let that = this;
			const data = {
				// cash_type:this.cashType,
				last_id: this.lastId
			}
			console.log("data", data);
			uni.showLoading({
				mask: true
			})
			that.$Ajax('/api/user/machinery/getTransferRecordList', data, res => {
				uni.hideLoading();
				this.isShowPage = true;
				if (res.success) {
					that.list = that.list.concat(res.data.transferRecordList);
					console.log("list:", that.list);
					if (res.data.transferRecordList.length > 0) {
						this.lastId = res.data.transferRecordList[res.data.transferRecordList.length - 1].id
						this.lsShow = true
					} else {
						this.lsShow = false
					}
				}
			}, err => {
				uni.hideLoading();
				this.isShowPage = true;
			})
		},
		// 查看
    viewData(event){
      // console.log('event', event.target.dataset.snlist)
      let snList = {...event.target.dataset}.snlist
      console.log('snList', snList)
      // this.snLlistAll = (item.sn_code_list).split(',')
      this.snLlistAll = snList.split(',')
      this.snLlist = JSON.parse(JSON.stringify(this.snLlistAll)) 
      console.log('sn_code_list',this.snLlistAll)
      this.keyword = ''
      this.openPopup('snPopup');
    },
    search(){
      const arr = this.searchArr(this.snLlistAll,this.keyword)
      this.snLlist = arr
      console.log('arr',arr)
    },
    /**
      * @param targetArr 对哪个*对象数组*进行模糊搜索
      * @param attribute (数组中某个元素)对象的属性名
      * @param keyword 搜索关键字
    */
    searchArr(targetArr, keyword) {
      // 创建一个空数据，用来存放筛选后的结果
				let result = [];
				// 遍历data
				targetArr.forEach(function(item) {
					// 检查每一个keyword的值是否大于等于 0
					if (item.indexOf(keyword) >= 0) {
						// 如果keyword的值大于等于0，就把这个元素添加到result的数组中
						result.push(item);
					}
				});
      return result
    },
		lower(e) {
			console.log("分页");
			if (this.lsShow == true) {
				this.getWithdrawList();
			} else {
				// return this.$tools.toast('到底了');
			}
		},
		/* 弹出框公用 */
    openPopup(e, item) {
      this.popupInfo = item;
      this.$refs[e].open();
    },
    hidePopup(e) {
      this.$refs[e].close();
      this.password = '';
    },
    changePopup(e) {
      console.log('popup ' + e.type + ' 状态', e.show);
    },
	}
}
</script>

<style scoped lang="scss">
.withdrawlog {
	&-container {
		width: 100%;
		height: 100vh;
	}

	&-scroll {
		overflow: hidden;
		padding-bottom: 40rpx;
	}

	&-list {
	}

	&-item {
		overflow: hidden;
		width: 93.6%;
		margin: auto;
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx 0;
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #000000;
		.top {
			@include flexBetween;
			padding: 0 28rpx;
			padding-bottom: 32rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);

			.name {
				font-size: 28rpx;
			}
		}

		.ico {
			width: 32rpx;
			height: 32rpx;
			display: inline-block;
			vertical-align: middle;
			margin-left: 8rpx;
		}

		.info {
			@include flexBetween;
			padding: 0 28rpx;
			margin-top: 24rpx;
			font-size: 28rpx;

			.txt {
				color: #333;
				font-weight: bold;
			}

			.label {
				color: #999999;
			}

			.des {
				color: #333;
			}

			.price,.red {
				color: #AD2926;
			}
		}
		.info:nth-of-type(1) {
			margin-top: 0;
		}
	}

	&-item:last-of-type {
		border-bottom: none;
	}
}
.modalPsd{
  background: #fff;
  .formBox{
  &-header{
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #000;
			text-align: center;
			padding: 48rpx 0 20rpx;
		}
		.cancel{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			position: absolute;
			top: 48rpx;
			right: 52rpx;
		}
    &-wrapper{
      padding: 32rpx;
      padding-top: 0;
    }
    &-item{
      margin-top: 24rpx;
      &-label{
        font-weight: bold;
        font-size: 28rpx;
        color: rgba(0,0,0,0.9);
        line-height: 41rpx;
      }
      &-inner{
        height: 108rpx;
        background: #F9F9F9;
        border-radius: 20rpx;
        padding: 0 20rpx;
        margin-top: 10rpx;
      }
    }
  .submit{
		height: 90rpx;
		line-height: 90rpx;
		background: #AD2926;
		border-radius: 118rpx;
		width: 92%;
		margin: 20rpx auto;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		margin-top: 60rpx;
  }
  }
  .search-box{
    margin-top: 48rpx;
    height: 72rpx;
    background: #F9F9F9;
    border-radius: 58rpx;
    @include flexLeft;
    .search{
    @include flexLeft;
      width: calc(100% - 176rpx);
      padding: 12rpx 26rpx;
    }
    input{
      font-weight: 500;
      font-size: 28rpx;
      color: #333;
      line-height: 36rpx;
      margin-left: 12rpx;
    }
    .ico{
      width: 38rpx;
      height: 38rpx;
    }
    .btn{
      width: 176rpx;
      text-align: center;
      height: 60rpx;
      line-height: 60rpx;
      background: #AD2926;
      border-radius: 1998rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
  .ul {
    margin-top: 20rpx;
    .ul-content{
      max-height: 300px;
      overflow-y: auto;
    }
  .li {
    @include flexLeft;
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    border: 1px solid #EBEBEB;
    .p {
      width: 50%;
      padding: 24rpx 0;
      background: #F9F9F9;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
      line-height: 36rpx;
    }
    .th {
      background: #F5F7FA;
    }
  }
  .li:nth-of-type(2) .p {
  }
}
}
</style>
